<template>
    <view class="page">
        <u-navbar title="优惠券" :back-icon-color="'#ffffff'" :title-color="'#ffffff'" :background="background"></u-navbar>
        <!-- <headBack :title="'优惠券'"></headBack> -->
        <z-paging ref="paging" v-model="dataList" @query="getList">
            <!-- <view class="headBottom"> -->
            <!-- 优惠券tab -->
            <template #top>
                <view class="coupon-tab">
                    <view class="box">
                        <view class="tab" v-for="item,index in tabList" :key="index" :class="{'action':(TabShow==index)}" @click="onCouponTab(index,item.id)">
                            <text>{{item.name}}</text>
                            <text class="line"></text>
                        </view>
                    </view>
                </view>
            </template>
            <!-- 优惠券列表 -->
            <view class="coupon-list">
                <view class="list" v-for="(coupon, index) in dataList" :key="index">
                    <view class="list-data" :class="{ 'coupon-lose': TabShow != 0 }">
                        <view class="coupon-price" v-if="coupon.offer_type == 3">
                            <view class="discounts">
                                <text class="min">￥</text>
                                <text class="max">{{coupon.offer_amount}}</text>
                            </view>
                            <view class="full-reduction"><text>满{{coupon.bottom_amount}}减{{coupon.offer_amount}}</text>
                            </view>
                            <view class="jag"></view>
                        </view>
                        <view class="coupon-price" v-if="coupon.offer_type == 1">
                            <view class="discounts">
                                <text class="min">￥</text>
                                <text class="max">{{coupon.offer_amount}}</text>
                            </view>
                            <view class="full-reduction"><text>无门槛立减{{coupon.offer_amount}}</text></view>
                            <view class="jag"></view>
                        </view>
                        <view class="coupon-price" v-if="coupon.offer_type == 2">
                            <view class="discounts">
                                <text class="min"></text>
                                <text class="max">{{coupon.offer_prop}}%</text>
                            </view>
                            <view class="full-reduction"><text>无门槛打折</text></view>
                            <view class="jag"></view>
                        </view>
                        <view class="coupon-price" v-if="coupon.offer_type == 4">
                            <view class="discounts">
                                <text class="min"></text>
                                <text class="max">{{coupon.offer_prop}}%</text>
                            </view>
                            <view class="full-reduction"><text>满{{coupon.bottom_amount}}折</text></view>
                            <view class="jag"></view>
                        </view>
                        <view class="coupon-info">
                            <view class="info-title">
                                <view class="tag">
                                    <text>{{ offerType.find(item=>item.dictValue==coupon.offer_type).dictLabel}}</text>
                                </view>
                                <view class="title">
                                    <text>{{coupon.title}}</text>
                                </view>
                            </view>
                            <view class="date-get" v-if="coupon.vali_type == 1 || coupon.vali_type == 2">
                                <view class="date">
                                    <text>{{$u.timeFormat(coupon.validity_time_start, 'yyyy/mm/dd')}}-{{$u.timeFormat(coupon.validity_time_end,
                                        'yyyy/mm/dd')}}</text>
                                </view>
                                <view class="get" @click="onCouponUse" v-if="TabShow === 0">
                                    <text>立即使用</text>
                                </view>
                            </view>
                            <view class="date-get" v-if="coupon.vali_type == 0 ">
                                <view class="date">
                                    <!-- <text>{{validType.find(item=>item.dictValue==coupon.vali_type).dictLabel}}</text> -->
                                </view>
                                <view class="get" @click="onCouponUse" v-if="TabShow === 0">
                                    <text>立即使用</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="use-status" v-if="TabShow != 0">
                        <text v-if="TabShow === 1">已使用</text>
                        <text v-else-if="TabShow === 2">已过期</text>
                    </view>
                    <view class="describe" v-show="isDes">
                        <text>{{ couponType.find(item=>item.dictValue==1).dictLabel}}</text>
                        <!-- 限品类：尽可购买酒水部分商品 -->
                    </view>
                </view>
                <!--  <view class="nodata">
                    <image :src="$imgUrl+'my/noDiscount.png'" mode="widthFix"></image>
                    <view class="txt">
                        <text>暂无优惠券</text>
                    </view>
                    <view class="txt">
                        <text>了解 </text>
                        <text class="yellow">最新优惠 >></text>
                    </view>
                </view> -->
            </view>
        </z-paging>
    </view>
</template>

<script>
import {
    getCouponListsAll
} from "@/api/my/coupon.js"
export default {
    data() {
        return {
            TabShow: 0,
            isDes: false,
            $imgUrl: this.$imgUrl,
            queryParams: {
                page: 1,
                limit: 20,
                status: 0,
            },
            background: {
                // 渐变色
                backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
            },
            couponType: [{
                dictLabel: '商品优惠券',
                dictValue: 1
            }],
            offerType: [
                // {
                //     dictLabel: '全部',
                //     dictValue: ''
                // },
                {
                    dictLabel: '无条件立减',
                    dictValue: 1
                }, {
                    dictLabel: '无条件打折',
                    dictValue: 2
                },
                {
                    dictLabel: '满减优惠',
                    dictValue: 3
                }, {
                    dictLabel: '满折优惠',
                    dictValue: 4
                }
            ],
            validType: [
                // {
                //     dictLabel: '全部',
                //     dictValue: ''
                // },
                {
                    dictLabel: '无限期',
                    dictValue: 0
                }, {
                    dictLabel: '时间区间',
                    dictValue: 1
                },
                {
                    dictLabel: '有效期',
                    dictValue: 2
                }
            ],
            numberType: [
                // {
                //     dictLabel: '全部',
                //     dictValue: ''
                // },
                {
                    dictLabel: '无限量',
                    dictValue: 0
                }, {
                    dictLabel: '数量有限',
                    dictValue: 1
                }
            ],
            tabList: [{
                name: '未使用',
                id: 0
            }, {
                name: '已使用',
                id: 1
            }, {
                name: '已过期',
                id: -1
            }],
            dataList: [],
            // tabIndex: 0,
            specify: "",
            isLogin: uni.getStorageSync('token') ? true : false,
        };
    },
    onLoad(options) {
    },
    onShow() {
    },
    methods: {
        // *
        //  * 优惠券tab点击
        //  * @param {Number} type
        /**
         * 返回点击
         */
        onBack() {
            uni.navigateBack();
        },
        onCouponTab(type, id) {
            this.TabShow = type;
            console.log(this.TabShow, '++')
            this.queryParams.status = id;
            // this.getList();
            this.$refs.paging.reload();
        },
        getList(page) {
            if (this.isLogin) {
                this.queryParams.page = page
                getCouponListsAll(this.queryParams).then(res => {
                    this.$refs.paging.complete(res.data.lists);
                }).catch(err => {
                    this.$refs.paging.complete(false);
                })
            } else {
                let data = []
                this.$refs.paging.complete(data);
            }
        },
        /**
         * 去使用点击
         */
        onCouponUse() {
            uni.switchTab({
                url: "/pages/mall/index",
            });
        },
    },
};
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

/* 优惠券tab */
.coupon-tab {
  position: fixed;
  left: 0;
  top: 100rpx;
  /* #ifdef APP-PLUS || MP-WEIXIN */
  top: calc(100rpx + var(--status-bar-height));
  /* #endif */
  /* #ifdef H5 */
  // top: 88rpx;
  /* #endif */
  z-index: 999;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;

  .box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    // border-bottom: 1px solid #bfbfbf;

    .tab {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 33%;
      height: 100%;

      text {
        font-size: 26rpx;
        color: #555555;
      }
    }

    .action {
      text {
        color: #2e996f;
      }

      .line {
        position: absolute;
        left: 50%;
        bottom: 10rpx;
        width: 30%;
        height: 6rpx;
        //   background: linear-gradient(to right, $base, #f6f6f6);
        background-color: #2e996f;
        transform: translate(-50%, 0);
      }
    }
  }
}

/* 优惠券 */
.coupon-list {
  padding: 20rpx 4%;
  margin: 250rpx auto 0;
  // min-height: 400rpx;
  background-color: #ffffff;

  .list {
    position: relative;
    width: 100%;
    min-height: 200rpx;
    box-shadow: 0 0 14rpx rgba(0, 0, 0, 0.1);
    border-radius: 6rpx;
    margin-bottom: 20rpx;
    overflow: hidden;

    .list-data {
      display: flex;
      align-items: center;
      width: 100%;
      height: 200rpx;

      .coupon-price {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 30%;
        height: 100%;
        background-color: #fe7e54;

        .discounts {
          display: flex;
          justify-content: center;
          align-items: flex-end;
          width: 100%;

          .min {
            color: #ffffff;
            font-size: 32rpx;
            font-weight: bold;
          }

          .max {
            font-size: 48rpx;
            color: #ffffff;
            font-weight: bold;
          }
        }

        .full-reduction {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 60rpx;

          text {
            font-size: 24rpx;
            color: #ffffff;
          }
        }

        .jag {
          position: absolute;
          top: 0;
          left: -6rpx;
          width: 6px;
          height: 100%;
          background-size: 10px 6px;
          background-color: #fff;
          background-position: 100% 35%;
          background-image: linear-gradient(
              -45deg,
              #fe7e54 25%,
              transparent 25%,
              transparent
            ),
            linear-gradient(-135deg, #fe7e54 25%, transparent 25%, transparent),
            linear-gradient(-45deg, transparent 75%, #fe7e54 75%),
            linear-gradient(-135deg, transparent 75%, #fe7e54 75%);
        }
      }
      .coupon-info {
        width: 70%;
        height: 90%;
        padding: 0 4%;
        .info-title {
          display: flex;
          width: 100%;
          height: 60rpx;
          .tag {
            margin-right: 10rpx;
            text {
              padding: 4rpx 16rpx;
              color: #ffffff;
              background-color: #fe7e54;
              font-size: 24rpx;
              border-radius: 40rpx;
            }
          }
          .title {
            text {
              font-size: 24rpx;
              color: #212121;
            }
          }
        }
        .date-get {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 80rpx;
          border-bottom: 2rpx dashed #eeeeee;
          .date {
            display: flex;
            align-items: center;
            width: 290rpx;
            text {
              font-size: 24rpx;
              color: #555555;
            }
          }
          .get {
            text {
              padding: 10rpx 20rpx;
              background-color: #fe7e54;
              color: #ffffff;
              font-size: 24rpx;
              border-radius: 100rpx;
            }
            .use {
              background-color: transparent;
              border: 1px solid #fe7e54;
              color: #fe7e54;
            }
          }
        }
        .describe-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 40rpx;
          text {
            color: #555555;
            font-size: 24rpx;
          }
          .more {
            transform: rotate(90deg);
          }
        }
      }
    }
    .coupon-lose {
      .coupon-price {
        background-color: #c0c0c0;
        .jag {
          position: absolute;
          top: 0;
          left: -6rpx;
          width: 6px;
          height: 100%;
          background-size: 10px 6px;
          background-color: #fff;
          background-position: 100% 35%;
          background-image: linear-gradient(
              -45deg,
              #c0c0c0 25%,
              transparent 25%,
              transparent
            ),
            linear-gradient(-135deg, #c0c0c0 25%, transparent 25%, transparent),
            linear-gradient(-45deg, transparent 75%, #c0c0c0 75%),
            linear-gradient(-135deg, transparent 75%, #c0c0c0 75%);
        }
      }
      .coupon-info {
        .info-title {
          .tag {
            text {
              background-color: #c0c0c0;
            }
          }
          .title {
            text {
              color: #c0c0c0;
            }
          }
        }
        .date-get {
          .date {
            text {
              color: #c0c0c0;
            }
          }
        }
      }
    }
    .describe {
      display: flex;
      align-items: center;
      padding: 0 4%;
      height: 60rpx;
      background-color: #ffffff;
      box-shadow: 0 -10rpx 10rpx #f5f5f5;
      text {
        color: #cccccc;
        font-size: 24rpx;
      }
    }
    .use-status {
      position: absolute;
      right: -20rpx;
      top: -25rpx;
      z-index: 10;
      width: 100rpx;
      height: 100rpx;
      border: 2rpx solid #c0c0c0;
      border-radius: 100%;
      text {
        display: inline-block;
        color: #c0c0c0;
        font-size: 24rpx;
        transform: rotate(45deg);
        margin-top: 40rpx;
      }
    }
  }
  .nodata {
    // background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 150rpx;
    image {
      width: 298rpx;
    }
    .txt {
      text-align: center;
      display: flex;
      text {
        font-size: 28rpx;
        color: #a4a4a4;
        padding-top: 70rpx;
      }
      .yellow {
        color: #ea5504;
        text-decoration: underline;
      }
    }
  }
}
</style>